<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "测试投保");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style type="text/css">

/* ======================按钮样式======================= */
.iosCheck input {
	display: none;
}

.iosCheck i {
	display: inline-block;
	cursor: pointer;
	padding-right: 25px;
	transition: all ease 0.2s;
	-webkit-transition: all ease 0.2s;
	border-radius: 25px;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}

.iosCheck i:before {
	display: block;
	content: '';
	width: 25px;
	height: 25px;
	border-radius: 25px;
	background: white;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.iosCheck :checked+i {
	padding-right: 0;
	padding-left: 25px;
	background: #0080cf;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px
		#0080cf;
}

.weCheck input {
	display: none;
}

.weCheck i {
	display: inline-block;
	cursor: pointer;
	padding: 0.2rem;
	transition: all ease 0.2s;
	-webkit-transition: all ease 0.2s;
	border-radius: 50%;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}

.weCheck i:before {
	display: block;
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: white;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.weCheck :checked+i {
	padding-right: 0;
	padding: 0.2rem;
	background: #0080cf;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px
		#0080cf;
}
	.weui-tabbar{
		position:fixed !important;
	}
/* ===================================================== */
input{
	text-align: right;
}
.label-color{
	color:#0080cf !important;
}
select {
	padding: 0.3rem 1rem;
	border-color: #afafaf;
	border-radius:5px;
}
option {
	border: 2px solid #afafaf;
	border-radius:10px;
}
.color-blue {
	color: #2196F3;
}
.bottom-btn {
	margin: 15px;
	padding: 2px;
	background-color: #2196F3;
}

.weui-btn_primary:not (.weui-btn_disabled ):active {
	background-color: #2196F3;
}
.weui-btn_disabled.weui-btn_primary{
	background-color: #2196F3;
}
.weui-btn_disabled {
	background-color: #79c0f9 !important;
}

.conDiv1{
	width:100px;
	height: 7px;
	margin-top:0.6rem;
	border: 1px solid #0080cf;
	border-radius:15px;
	width:160px;
}
.conDiv2{
	width:0px;
	height: 8px;
	background-color: #0080cf;
	border-radius:13px;
}
</style>
<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>
<div class="goback" data-back-href="<c:url value='/wechat/zzb/toFanhuaCar'/>"></div>	
<div style="text-align: center;">
	<span style="width:8rem;display: inline-block;font-size: 1.0rem;font-weight: 800;border-bottom: 0.08rem solid #ea693f;color:#ea693f;letter-spacing: 0.2rem;padding-top: 0.3rem;">基本信息</span>
</div>
<form class="fanhuaCar" method="post">
	<div class="weui-cells">
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>购买人身份</p>
	    </div>
	    <div class="weui-cell__ft label-color">
	    	<t:provider packageName="cust" enumClassName="CustomerLevel" value="${customer.level}"/>
	    	<input name="buyerIdentity" type="hidden" value="${customer.level}" />
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>投保地区</p>
	    </div>
	    <div class="weui-cell__ft label-color">   
			<select id="provinceId" name="provinceId" >
			
			</select>
			<select id="cityId" name="cityId">
			
			</select>
	    </div>
	  </div>	  
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>车牌号</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
	    	<input name="carLicenseNo" class="weui-input carNum" type="text"  placeholder="请输入车牌号" onblur="checkCarNum()" onkeyup="UpperCase(this)" >
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>车主姓名</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
	    	<input name="carOwener" class="weui-input username" type="text"  placeholder="请输入车主姓名" onblur="checkUsername()">
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>联系方式</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
	    	<input name="phone" class="weui-input phone" type="text"  placeholder="请输入手机号" onblur="checkUserPhone()">
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>是否贷款</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label name="isLoan" class="iosCheck">
				<input class="isloan  isSelect" type="checkbox">
				<i></i>
				<input name="isLoan" type="hidden" value=""/>
				</label>
	    </div>
	  </div>
	  <div class="weui-cell bank" style="display:none;">
	    <div class="weui-cell__bd">
	      <p>贷款银行</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
	    	<input name="loanBrank" class="weui-input bankName" type="text"  placeholder="请输入贷款银行" onblur="checkBankName()">
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>是否过户</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input  type="checkbox" class="isSelect">
				<i></i>
				<input name="isTransfer" type="hidden" value="" />	
			</label>
	    </div>
	  </div>
	  
	  <div style="text-align: center;">
		<span style="width:8rem;display: inline-block;font-size: 1.0rem;font-weight: 800;border-bottom: 0.08rem solid #ea693f;color:#ea693f;letter-spacing: 0.2rem;padding-top: 0.3rem;">保险配置</span>
	  </div>
	  
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>车损险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input name="vehicleDemageIns"  type="checkbox" checked="checked" disabled="disabled">
				<i></i>
				<input name="vehicleDemageIns" type="hidden" value="0"/>
			</label>
	    </div>
	  </div>	  
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>三者险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<select name="thirdPartyIns" >
				<option value="1">30万</option>
				<option value="2">50万</option>
				<option value="2">100万</option>
			</select>
		</div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>司机责任险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<select name="driverIns" >
				<option value="0">不投保</option>
				<option value="1">1万</option>
				<option value="2">2万</option>
				<option value="3">3万</option>
			</select>
		</div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>乘客责任险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<select name="passengerIns">
				<option value="0">不投保</option>
				<option value="1">1万</option>
				<option value="2">2万</option>
				<option value="3">3万</option>
			</select>
		</div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>玻璃险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
				<select name="glassIns">
					<option value="0">不投保</option>
					<option value="1">进口</option>
					<option value="2">国产</option>
				</select>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>盗抢险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="theftIns" type="text" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>自燃险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="combustionIns" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>划痕险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="scratchIns" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>涉水险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
					<input type="checkbox" class="isSelect">
					<i></i>
					<input name="sadingIns" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>无法找到第三方特约</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect"/>
				<i></i>
				<input name="vehicleDemageMissedThirdPartyCla" type="hidden" value="" />	
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>指定专修厂险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="specifyingPlantCla" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>新增设备险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="newEquipmentIns" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>车上货物险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="goodsOnVehicleIns" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>精神损害抚慰金责任险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="compensationForMentalDistressIns" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>交强险</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="insuranceTax" type="hidden" value="" />
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>车船税</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="vehicleTax" type="hidden" value="" />	
			</label>
	    </div>
	  </div>
	  <div class="weui-cell">
	    <div class="weui-cell__bd">
	      <p>车船税滞纳金</p>
	    </div>
	    <div class="weui-cell__ft label-color">  
			<label class="iosCheck">
				<input type="checkbox" class="isSelect">
				<i></i>
				<input name="vehicleLateFee" type="hidden" value="" />		
			</label>
	    </div>
	  </div>	  
	  <div class="weui-cell">
    	<div class="weui-cell__bd">
      		<div class="weui-uploader">
        		<div class="weui-uploader__hd">
          			<p class="weui-uploader__title weui-label">身份证正反面</p>
        		</div>
        		<img style="width:160px; height:100px;background-image:url(<c:url value='/images/we/zzb/idfront1.jpg' />);background-size:160px 100px;" id="idFrontOssIdShow"/> 
        		<input type="hidden" id="idFrontOssId" class="imgInput" name="idCardFace"/>
        		<img style="width:160px; height:100px;background-image:url(<c:url value='/images/we/zzb/idreverse1.jpg' />);background-size:160px 100px;" id="idReverseOssIdShow"/>
        		<div "class="conDiv1 parent1">
        			<div class="conDiv2 progress1"></div>
        		</div>
        		<input type="hidden" id="idReverseOssId" class="imgInput" name="idCardBack"/>       		       		
      		</div>
    	</div>
	  </div>		  
	
	  <div class="weui-cell">
    	<div class="weui-cell__bd">
      		<div class="weui-uploader">
        		<div class="weui-uploader__hd">
          			<p class="weui-uploader__title weui-label">行驶证反面</p>
        		</div>
        		<img style="width:160px; height:100px;" id="carFrontOssIdShow"/> 
        		<input type="hidden" id="carFrontOssId" class="imgInput" name="licenseNoFace"/>
        		<img style="width:160px; height:100px;" id="carReverseOssIdShow"/>
        		<div "class="conDiv1 parent2">
        			<div class="conDiv2 progress2"></div>
        		</div>
        		<input type="hidden" id="carReverseOssId" class="imgInput" name="licenseNoBack"/>
      		</div>
    	</div>
	  </div>
	  
	</div>
	<div style="height:4rem"></div>
	<div class="weui-tabbar">
	    <a style="flex-grow:1;" href="javascript:toTest();" class="weui-btn weui-btn_primary bottom-btn" id="btn">提&nbsp;&nbsp;&nbsp;&nbsp;交</a>	    
	 </div>
	<%-- <div style="z-index: 500;">
		<a href="<c:url value='/wechat/zzb/insuFanHuaTest'/>" class="weui-btn weui-btn_primary bottom-btn weui-btn_disabled" id="btn">提&nbsp;&nbsp;&nbsp;&nbsp;交</a>
	</div> --%>
</form>
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/tools/upload-cos.jsp"%>

<script type="text/javascript">

/* ======================点击提交============================== */
	function toTest(){	
		if(!checkInput())
		{return;};
		$(".isSelect").each(function() {
			if($(".isSelect").is(':checked')){
				$(".isSelect").next().next().val("0");
			}else{
				$(".isSelect").next().next().val("1");
			}
		}) 
		var fanhuaCar=$(".fanhuaCar").serialize();
		window.location.href=$.getVirtualPath()+"/wechat/zzb/insuFanHuaTest?fanhuaCar="+fanhuaCar;
	}
	
/* =============ajax 传输数据 =================*/
/* function toselect() {
	var formData=$(".fanhuaCar").serialize();
	var url = "/wechat/zzb/insuFanhuaTest"
		$.ajax({
			  type: 'POST',
			  url: url,
			  data: formData,
			  success: function a(){
				  
			  },
			  dataType: json
		});
}  */


	
$(function () {
	$(".imgInput").val("");
/* =============贷款银行是否显示 =================*/
	$(".isloan").click(function () {
		if($(".isloan").is(':checked')){
			$(".bank").show();
		}else{
			$(".bank").hide();
			$(".bankName").val("无");
		}
	})
	if($(".isloan").is(':checked')){
		$(".bank").show();
	}
	
/* ====================== 图片上传相关 ===========================*/
	$(".parent1").hide();
	$("#idFrontOssIdShow").on('click',function(e) {
		$(".progress1").width(0);
		$("#idFrontOssId").startCosFileUpload({
			fillImg:"#idFrontOssIdShow",
			progressCallback:function(curr, sha1){
				$(".parent1").show();
				$(".progress1").width(sha1*160);
			}
		});
	});
	
	$(".parent1").hide();
	$("#idReverseOssIdShow").on('click',function(e) {
		$(".progress1").width(0);
		$("#idReverseOssId").startCosFileUpload({
			fillImg:"#idReverseOssIdShow",
			progressCallback:function(curr, sha1){
				$(".parent1").show();
				$(".progress1").width(sha1*160);
			}
		});
	});
	
	$(".parent2").hide();
	$("#carFrontOssIdShow").on('click',function(e) {
		$(".progress2").width(0);
		$("#carFrontOssId").startCosFileUpload({
			fillImg:"#carFrontOssIdShow",
			progressCallback:function(curr, sha1){
				$(".parent2").show();
				$(".progress2").width(0);
				$(".progress2").width(sha1*160);
			}
		});
	});
	
	$(".parent2").hide();
	$("#carReverseOssIdShow").on('click',function(e) {
		$(".progress2").width(0);
		$("#carReverseOssId").startCosFileUpload({
			fillImg:"#carReverseOssIdShow",
			progressCallback:function(curr, sha1){
				$(".parent2").show();
				$(".progress2").width(sha1*160);
			}
		});
	});
})

/* ======================表单验证===============================*/
	
	//车牌号 
	function checkCarNum(){
		/* var carNum = $('.carNum').val();
		var pattern = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/;
		if($.isNull(carNum)) {
			$.toptip("请输入车牌号",'error');
			return false;
		}else if(!pattern.test(carNum)){
			$.toptip('请输入正确的车牌号','error');
			return false;
		} */
		return true;
	}
	/* //车牌 小写转大写
	function UpperCase(obj) {
		$('.carNum').val(obj.value.toUpperCase());
	} */
	
	//车主姓名
	function checkUsername(){
		var name = $(".username").val();
		if($.isNull(name)){
			$.toptip('车主姓名不能为空','error');
			return false;
		}
		return true;
	}
	//联系方式 
	function checkUserPhone(){
		var phone = $('.phone').val();
		var pattern = /^1[3|5|7|8]\d{9}$/;
		if($.isNull(phone)) {
			$.toptip("请输入手机号",'error');
			return false;
		}else if(!pattern.test(phone)){
			$.toptip('请输入正确的手机号','error');
			return false;
		}
		return true;
	}
	
	//银行名称
	function checkBankName() {
		if($(".isloan").is(':checked')){
			var bankName = $(".bankName").val();
			if($.isNull(bankName)){
				$.toptip('贷款银行不能为空','error');
				return false;
			}		
		}
		return true;
	}
	
	//验证照片
	function checkpicture(){
		var front = $('#idFrontOssId').val();
		var reverse = $('#idReverseOssId').val();
		var carFront = $('#carFrontOssId').val();
		var carReverse = $('#carReverseOssId').val();
		
		if(!$.isNull(front)&&!$.isNull(reverse)&&!$.isNull(carFront)&&!$.isNull(carReverse)) {
			return true;
		}
		$.toptip('请完成照片上传','error');
		return false;
	}

	//检查输入
	function checkInput(){
		if(checkpicture()&&checkUserPhone()&&checkUsername()&&checkCarNum()&&checkBankName()){
			return true;
		}
		return false;
	}
	/* =============城市级联 =================*/
	$(function(){
		 $("#provinceId").on("change",function(){
			 var provinceId=$("#provinceId").val();
			 loadProvinceSelect2(provinceId); 
		}); 
		initProvinceCity();
		
	});

  function initProvinceCity(){
  	var provinceId=$("#provinceId").val();
		var cityId=$("#cityId").val();
		if($.isNull(provinceId)){
			 provinceId = 'all';
			 loadProvinceSelect2(provinceId); 
		}else{
			loadProvinceSelect2(provinceId,cityId);
		}
		
  };
	
	function loadProvinceSelect2(keyId,cityId){
		
		$("#provinceId option").remove();
		$("#cityId option").remove();
		/* var pre = '';
		var suf = ''; */
		var url=$.getVirtualPath()+"/wechat/zzb/provinceCity?keyId=all";
		var provinces =$.getJsonPost(url);
      var optProvince=[];
      
      $.each(provinces,function(index,province){
			var proSelected="";
			proSelected=province.id.indexOf(keyId)>=0?"selected=selected":"";
			/* if(province.id.indexOf(keyId)>=0){
				pre = province.paramValue;
				proSelected = "selected=selected";
			} */
			optProvince.push("<option "+proSelected+" value='"+province.id+"'>"+province.paramValue+"</option>");
	    });
      $("#provinceId").append(optProvince);
      
      
      url=$.getVirtualPath()+"/wechat/zzb/provinceCity?keyId=" + $("#provinceId").val();
		var citys =$.getJsonPost(url);
      var optCity=[];
      
      $.each(citys,function(index,city){
			var citySelected="";
			citySelected=city.id.indexOf(cityId)>=0?"selected=selected":"";	 
			/* if(city.id.indexOf(cityId)>=0){
				suf = city.paramValue;
				citySelected = "selected=selected";
			} */
			
			optCity.push("<option "+citySelected+" value='"+city.id+"'>"+city.paramValue+"</option>");
	    });
      $("#cityId").append(optCity);

	}
</script>


